.top-page {
  min-height: 100vh;
  background-color: #fff;

  :deep(.cu-right) {
    margin-right: 30rpx;
    font-weight: bold;
    font-size: calc(30rpx * var(--amplified_base));
  }

  :deep(.cu-bar) {
    background-color: #d9d9d9;
  }
}

.filtrate-wrap {
  padding: 12rpx 20rpx;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;

  .filtrate {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    line-height: 1;
    font-size: 28rpx;

    .filtrate__value {
      position: relative;
      padding: 8rpx 24rpx;
      background-color: #d9d9d9;
      color: #212121;
      margin-right: 18rpx;
      border-radius: 999rpx;

      .filtrate--close {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        width: 30rpx;
        height: 30rpx;
        background-color: var(--subject_color);
        border-radius: 50%;

        &::before,
        &::after {
          width: calc(var(--amplified_base) * 20rpx);
          height: calc(var(--amplified_base) * 2rpx);
          background-color: #fff;
        }
      }
    }
  }
}

.list {
  width: 100%;
  display: flex;
  flex-direction: column;

  .list-item {
    padding: 20rpx;
    display: flex;
    flex-direction: row;

    .avatar {
      width: 96rpx;
      height: 96rpx;
      border-radius: 12rpx;
      flex-shrink: 0;
    }

    .list-item__right {
      margin-left: 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .list-item__right-top {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;

        .name,
        .sex {
          margin-right: 8rpx;
        }

        .name {
          font-size: 28rpx;
          color: #000;
        }

        .sex {
          width: 30rpx;
          height: 30rpx;
        }

        .level {
          padding: 8rpx 16rpx;
          border-radius: 999rpx;
          font-size: 12rpx;
          color: #3a77ce;
          line-height: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          background: linear-gradient(314deg, #b1e7ff 51.86%, #bcecff 54.01%);

          .level-img {
            width: 24rpx;
            height: 24rpx;
            margin-right: 4rpx;
          }
        }
      }

      .list-item__right-detail {
        color: #7c7c7c;

        .detail-item {
          display: initial;
          word-break: break-all;
          padding: 0 8rpx;
          border-right: 1rpx solid #ccc;

          &:last-child {
            border: none;
          }

          &:first-child {
            padding-left: 0;
          }
        }
      }
    }
  }
}

.finished__text {
  padding: 100rpx 0;
  text-align: center;
  color: #999;
}

:deep(.lxd-popup) {
  width: 500rpx;
  padding: 40rpx;

  .filtrate-item {
    margin-bottom: 30rpx;

    .filtrate-item__title {
      font-weight: bold;
      font-size: calc(32rpx * var(--amplified_base));
    }

    .filtrate-item__list {
      margin-top: 24rpx;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;

      .filtrate-item__list-li {
        margin-bottom: 20rpx;
        margin-right: 12rpx;
        background-color: #ebebeb;
        color: #525252;
        padding: 12rpx 28rpx;
        line-height: 1;
        border-radius: 999rpx;
      }

      .on {
        background-color: var(--subject_color);
        color: #fff;
      }
    }
  }

  .btns-wrap {
    margin-top: 200rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    .btn {
      width: 40%;
      background-color: #f3f5f7;
      text-align: center;
      line-height: 1;
      padding: 24rpx 0;
      border-radius: 999rpx;
    }
  }
}
